<template>
  <div class="flexcen">
    <el-form
      @submit.native.prevent
      ref="form"
      :model="user"
      :rules="disabled ? '' : rules"
      label-width="120px"
    >
      <el-form-item label="姓名" prop="nickName">
        <el-input
          v-if="!disabled"
          v-input-restrict
          @input="handleInput"
          style="width: 400px"
          v-model="user.nickName"
          maxlength="10"
          show-word-limit
        />
        <div v-else>{{ user.nickName }}</div>
      </el-form-item>

      <el-form-item label="性别">
        <el-radio-group v-if="!disabled" v-model="user.sex">
          <el-radio label="0">男</el-radio>
          <el-radio label="1">女</el-radio>
        </el-radio-group>
        <div v-else>{{ user.sex == "0" ? "男" : "女" }}</div>
      </el-form-item>
      <el-form-item label="个人头像" prop="avatar">
        <uploadAvatar
          :disabled="disabled"
          :avatar="user.avatar"
          @refresh="uploadAvatarReturn"
        ></uploadAvatar>
      </el-form-item>
      <el-form-item
        label="门店-岗位"
        prop="avatar"
        v-if="user.schoolPostList && user.schoolPostList.length > 0"
      >
        <el-card
          v-for="item in user.schoolPostList"
          :key="item.schoolId"
          class="box-card"
        >
          {{ item.schoolName }}-{{ item.postNames.join("、") }}</el-card
        >
      </el-form-item>
      <el-form-item label="账号(手机号码)" prop="phoneNumber">
        {{ user.phoneNumber }}
        <el-button
          v-if="!disabled"
          type="text"
          icon="el-icon-edit"
          @click="phoneNumberEdit"
          >编辑</el-button
        >
      </el-form-item>
      <el-form-item label="密码">
        ******
        <el-button
          v-if="!disabled"
          type="text"
          icon="el-icon-edit"
          @click="passwordEdit"
          >编辑</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button
          v-if="disabled"
          v-preventReClick
          type="danger"
          size="mini"
          @click="close"
          >返回</el-button
        >
        <el-button
          v-if="disabled"
          v-preventReClick
          type="primary"
          size="mini"
          @click="handleEdit"
          >编辑</el-button
        >
        <el-button
          v-if="!disabled"
          v-preventReClick
          size="mini"
          @click="handleCancel"
          >取消</el-button
        >
        <el-button
          v-if="!disabled"
          v-preventReClick
          type="primary"
          size="mini"
          @click="submit"
          >确认</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<style lang="scss" scoped>
::v-deep .el-card__body {
  padding: 5px 20px 5px 20px;
}
</style>
<script>
import { updateUserProfile } from "@/api/system/user";
import uploadAvatar from "@/components/uploadAvatar";

export default {
  components: { uploadAvatar: uploadAvatar },
  props: {
    user: {
      type: Object,
    },
  },
  data() {
    return {
      disabled: true,
      // 表单校验
      rules: {
        nickName: [
          { required: true, message: "姓名不能为空", trigger: "blur" },
        ],
      },
      StorageForm: {},
    };
  },
  methods: {
    handleEdit() {
      this.disabled = false;
      this.StorageForm = { ...this.user };
    },
    handleCancel() {
      this.disabled = true;
      this.user = { ...this.StorageForm };
    },
    handleInput() {
      // 使用正则表达式来校验输入内容，只允许汉字和英文字符
      this.user.nickName = this.user.nickName.replace(
        /[^\u4E00-\u9FA5A-Za-z]/g,
        ""
      );
    },
    phoneNumberEdit() {
      this.$emit("changeTab", "phoneNumber");
    },
    passwordEdit() {
      this.$emit("changeTab", "password");
    },
    /* 头像组件返回 */
    uploadAvatarReturn(e) {
      this.user.avatar = e;
    },
    submit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          updateUserProfile(this.user).then((response) => {
            this.$store.commit("SET_AVATAR", this.user.avatar);
            this.$store.commit("SET_NAME", this.user.nickName);
            this.$modal.msgSuccess("修改成功");
            this.disabled = true;
          });
        }
      });
    },
    close() {
      this.$tab.closePage();
    },
  },
};
</script>
